<template>
    <div class="login">
        <div class="formbox">
            <div class="circlebg">
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
            </div>

            <el-form class="demo-form-inline" v-loading.fullscreen.lock="isLoading"
                element-loading-background="rgba(122, 122, 122, 0.8)" element-loading-text="登录中" :rules="rules"
                ref="ruleFormRef" :model="form">

                <h1 class="title">登录</h1>
                <el-form-item class="form-item" prop="username">
                    <myInput placeholder="请输入用户名" v-model="form.username"></myInput>
                </el-form-item>
                <el-form-item class="form-item" prop="password">
                    <myInput placeholder="请输入密码" type="password" v-model="form.password"></myInput>
                </el-form-item>
                <el-form-item class="form-item form-btn">
                    <button class="btn"  @click.prevent="login(ruleFormRef)">→</button>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import myInput from "@/components/myInput.vue"
import { useUserStore } from "../store/index"
import { storeToRefs } from "pinia"
import { useRouter } from "vue-router"
// @ts-ignore
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const ruleFormRef = ref()
const userStore = useUserStore()
const { isLoading } = storeToRefs(userStore)
const form = reactive({
    username: "",
    password: ""
})

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'change' },
    ]
})


// function click(){
//     console.log(123);
// }

async function login(formEl: any) {
    if (!formEl) return
    await formEl.validate(async (valid: any, fields: any) => {
        if (valid) {
            try {
                await userStore.login(form.username, form.password)
                isLoading.value = false
                router.push("/file/1")
            } catch (error) {
            }
        } else {
            console.log('error Login!', fields)
        }
    })

}
</script>
<style lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    position: relative;

    .formbox {
        width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .circlebg{
            position: absolute;
            height: 100%;
            width: 100%;
            animation: bgAm ease-out 1s;
        }
        @keyframes bgAm {
            0% { transform: scale(0, 0) rotate(60deg);  }
            100% { transform: scale(1, 1) rotate(0);  }
        }
        .circle {
            position: absolute;
            border-radius: 50%;
            box-shadow: 1px 1px 50px #000;
            opacity: 0.7;
            z-index: -1;
        }

        .circle:nth-child(1) {
            top: -70px;
            left: -73px;
            width: 120px;
            height: 120px;
            background-color: purple;
            animation: circleAm1 ease-in-out 3s infinite alternate;
        }

        .circle:nth-child(2) {
            bottom: -100px;
            left: 250px;
            width: 200px;
            height: 200px;
            background-color: orange;
            animation: circleAm1 ease-in-out 4s infinite alternate-reverse;
        }

        .circle:nth-child(3) {
            top: 20px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: cyan;
            animation: circleAm1 ease-in-out 2.5s infinite alternate;
        }

        @keyframes circleAm1 {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-30px);
            }
        }

    }

    .demo-form-inline {
        box-shadow: inset 1px 1px 6px rgba($color: #fff, $alpha: 0.3), 2px 2px 15px rgba($color: #000, $alpha: 0.5);
        background-color: rgba($color: #000, $alpha: 0.1);
        backdrop-filter: blur(3px); //毛玻璃属性
        padding: 20px 25px;
        border-radius: 8px;

        animation:  fromAction ease-out 1s 0.2s backwards;

        @keyframes fromAction {
            0% { transform: translateY(8px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        &:hover{
            box-shadow: inset 1px 1px 3px rgba($color: #fff, $alpha: 0.9), 4px 4px 25px rgba($color: #000, $alpha: 0.9);
            backdrop-filter: blur(7px);
        }



        .form-item {
            margin: 30px 0 0 0;
            width: 100%;


        }

        .form-btn {
            margin: 60px 0 30px 0;

            .el-form-item__content {
                width: 100%;
                display: flex;
                justify-content: center;
            }

            .btn{
                border: none;
                width: 70px;
                height: 70px;
                border-radius: 35px;
                color: #eee;
                font-weight: bold;
                font-size: 28px;
                background: rgba($color: #fff, $alpha: 0.1);
                box-shadow: 0px 2px 10px #111;
                transition: all .3s linear;
                cursor: pointer;
                z-index: 2;

                &:hover{
                    width: 160px;
                    border-radius: 70px;
                    box-shadow: 0px 0px 10px #999, inset 0px 0px 5px #333;
                }

                &:active{
                    box-shadow: 0px 0px 15px #bbb, inset 0px 0px 15px #444;
                }
            }
        }

        .title {
            text-align: center;
            margin: 0 0 40px 0;
            font-size: 28px;
            color: #ccc;
        }


    }
}</style>